import React, { useEffect, useState } from 'react'
import BlockTitle from '../../../../../framework/BlockTitle'
import SouyeApi from '../../../../../../utils/apis/SouyeApi'
import { resourcePath } from '../../../../../../utils/resource'
import './index.less'
import { Progress } from 'antd'
import ProgressPlus from './ProgressPlus'

export default function Sjtj() {
    const [cztCount, setCztCount] = useState(0)
    const [wxhxpCount, setWxhxpCount] = useState(0)
    const [ggfwssCount, setGgfwssCount] = useState(0)
    const [otherCount, setOtherCount] = useState(0)
    const [jzzyCount, setJzzyCount] = useState(0)
    useEffect(() => {
        SouyeApi.czt_total().then(resp => {
            setCztCount(resp.data[0].count)
        })
    }, [])
    useEffect(() => {
        SouyeApi.czt_zl().then(resp => {
            setWxhxpCount(resp.data.find(e => e.cztzl === '危险化学品')?.count)
            setGgfwssCount(resp.data.find(e => e.cztzl === '公共服务设施')?.count)
            setOtherCount(resp.data.filter(e => e.cztzl !== '危险化学品' && e.cztzl !== '公共服务设施').reduce((a, b) => a + b.count, 0))
        })
    }, [])
    useEffect(() => {
        SouyeApi.jzzy_total().then(resp => {
            setJzzyCount(resp.data[0].count)
        })
    }, [])

    const renderProgress = ({ png, title, count, color, total }) => {
        return <div className='layout-h center'>
            <div >
                <ProgressPlus color={color} percent={count / total * 100} > <img src={png} /></ProgressPlus>

            </div>
            <div className='layout-v' style={{
                marginLeft: 14,
            }}>
                <div style={{
                    fontSize: 20,
                    color: '#FFFFFF',
                    fontWeight: 'bold',
                }}>{count}</div>
                <div style={{
                    color: '#D9F1FF',
                    fontSize: 14,
                }}>{title}</div>
            </div>
        </div>
    }

    return <div className='home-sjtj'>
        <BlockTitle>数据统计</BlockTitle>
        <div className='layout-v center' style={{
            padding: '20px 0',
        }}>
            <div className="layout-h center w100" style={{
                // justifyContent: 'space-around'
            }}>
                <div className='layout-v center fill'>
                    <div className='layout-h j-center' style={{
                        width: 137,
                        height: 108,
                        lineHeight: '65px',
                        background: `url(${resourcePath.homeCountPng})`,
                    }}>
                        <div className='total-count'>{cztCount}</div>
                    </div>
                    <div className='total-title'>承灾体数量</div>
                </div>
                <div className='layout-v fill' style={{
                    gap: 14,
                }}>
                    {renderProgress({ png: resourcePath.homeWxhxpPng, title: '危险化学品', count: wxhxpCount, color: 'red', total: cztCount })}
                    {renderProgress({ png: resourcePath.homeGgfwssPng, title: '公共服务设施', count: ggfwssCount, color: 'yellow', total: cztCount })}
                    {renderProgress({ png: resourcePath.homeOtherPng, title: '其他承灾体', count: otherCount, color: '#40AAF6', total: cztCount })}
                </div>
            </div>

            <div className="layout-h center w100" style={{
                // justifyContent: 'space-around'
                marginTop: 30
            }}>
                <div className='layout-v center fill'>
                    <div className='layout-h j-center' style={{
                        width: 137,
                        height: 108,
                        lineHeight: '65px',
                        background: `url(${resourcePath.homeCountPng})`,
                    }}>
                        <div className='total-count'>{jzzyCount}</div>
                    </div>
                    <div className='total-title'>减灾资源数量</div>
                </div>
                <div className='layout-v fill' style={{
                    gap: 14,
                }}>
                    {renderProgress({ png: resourcePath.homeWxhxpPng, title: '政府综合减灾资源', count: wxhxpCount, color: 'red', total: cztCount })}
                    {renderProgress({ png: resourcePath.homeOtherPng, title: '其他减灾资源', count: otherCount, color: 'blue', total: cztCount })}
                </div>
            </div>
        </div>
    </div>
}